/**
 * Created by xiongisxiong on 2018/4/27 edited on 5/15
 */
import React, { PureComponent } from 'react'
import { View, Text, Image, TouchableOpacity, FlatList, SectionList,ScrollView, ImageBackground } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

import { screen, color } from '../utils'
import { TextTool, SeparatorVertical, EventItem, ListFooter, } from '../widgets'
import { FRIENDS_EVENT } from '../api'

const { H3, H4, Tip, Normal } = TextTool


export default class Friends extends PureComponent {
  static navigationOptions = ({navigation}) => ({
    headerLeft: <Icon name='ios-person-add-outline' size={30} color={color.white}/>,
    headerRight: <Icon name='ios-stats-outline' size={30} color={color.white}/>,
    headerStyle: {
      backgroundColor: color.theme,
      paddingHorizontal: 20 // 左右设置padding值，与左右边距有点距离
    }
  })
  state = {
    refreshing: false,
    event: [],
    footerText:'已加载完全部数据'
  }
  componentWillMount() {
    this.requestData();
  }
  // 请求数据
  requestData = () => {
    (
      async () => {
        try {
          const res = await fetch('http://192.168.0.14:3000/event');
          const event = await res.json();
          let t = '';
          console.log("朋友圈返回的数据：", event);
          if (event.code === 301) {
            t = '请先登录'
          }
          this.setState({
            // event,
            // refreshing: false,
            footerText: t
          })
        } catch (err) {
          alert(err)
        }
      }
    )()
  }
  // 渲染列表的头部
  renderHeader = () => (
    <View style={{paddingVertical: 15, paddingLeft: 10, backgroundColor: color.backgroundColor}}>
      <Normal>热门话题 ></Normal>
      <ScrollView 
        horizontal
        alwaysBounceHorizontal
        showsHorizontalScrollIndicator={false}
        style={{marginTop: 10}}
      >
        {/* 此处用到了背景图片，使用ImageBackground(先用Image排好再更改为ImageBackground)或者绝对定位 */}
        <ImageBackground key='1' source={require('../imgs/img/18894007811887644.jpg')} style={{height: screen.width/6, width: screen.width*0.35, marginRight: 5}}>
          <View style={{backgroundColor: 'rgba(0,0,0,0.3)', flex: 1,justifyContent:'center', alignItems: 'center'}}>
            <Normal color={color.white}>#入秋#</Normal>
          </View>
        </ImageBackground>
        
        <Image key="2" source={require('../imgs/img/18894007811887644.jpg')} style={{height: screen.width/6, width: screen.width*0.35, marginRight: 5}}/>
        <Image key="3" source={require('../imgs/img/18894007811887644.jpg')} style={{height: screen.width/6, width: screen.width*0.35, }}/>
      </ScrollView>
    </View>
  )
  // 列表主内容
  renderItem = ({item}) => (
    // <EventItem data={item}/>
    <View></View>
  )
  render() {
    const { refreshing, event, footerText } = this.state;
    return (
      <View style={{flex: 1}}>
        <View style={{flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', height: 40, backgroundColor: color.backgroundColor,marginBottom: 10}}>
          <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
            <Icon name='ios-create-outline' size={30} />
            <H4 style={{marginLeft: 10}} title='发动态'></H4>
          </View>
          <SeparatorVertical />
          <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
            <Icon name='ios-videocam-outline' size={30} />
            <H4 style={{marginLeft: 10}} title='发布视频'></H4>
          </View>
        </View>
        <FlatList 
          data={event}
          refreshing={refreshing}
          onRefresh={this.requestData}
          keyExtractor={(item, index) => index}
          ListHeaderComponent={this.renderHeader}
          ListFooterComponent={() => <ListFooter text={footerText}/>}
          renderItem={this.renderItem}
        />
      </View>
    )
  }
}